<template>
  <div class="game-content">
    <com-header></com-header>
    <div class="centerbox">
      <div class="pro-box">
        <div
          class="pro"
          :class="{
            active: selected === 'long',
            isacitve: selected !== 'long',
          }"
          @click="checkSelected(1)"
        >
          <div class="box img-long">
            <div class="content">
              <div class="longbgi">
                <span>龙</span>
                <span>{{config_long.odds}}</span>
              </div>
              <span
                v-if="config_long.credit !== undefined && config_long.credit !== null"
              >{{ config_long.credit }}</span>
              <span v-else>0</span>
            </div>
          </div>
        </div>
        <div
          class="pro"
          :class="{
            active: selected === 'hu',
            isacitve: selected !== 'hu',
          }"
          @click="checkSelected(2)"
        >
          <div class="box img-hu">
            <div class="content">
              <div class="hubgi">
                <span>虎</span>
                <span>{{config_hu.odds}}</span>
              </div>
              <span
                v-if="config_hu.credit !== undefined && config_hu.credit !== null"
              >{{ config_hu.credit }}</span>
              <span v-else>0</span>
            </div>
          </div>
        </div>
      </div>
      <com-money class="money-posi"></com-money>
      <com-btn class="btn-posi"></com-btn>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import ComMoney from "./Com/ComMoney.vue";
import ComHeader from "./Com/ComHeader.vue";
import ComBtn from "./Com/ComBtn.vue";
export default {
  name: "GameSdlh",
  //游戏速度龙虎
  props: {},
  components: {
    ComMoney,
    ComHeader,
    ComBtn
  },

  data() {
    return {
      imgData: [
        { src: require("@/assets/images/payOrder/a1.png") },
        { src: require("@/assets/images/payOrder/a2.png") },
        { src: require("@/assets/images/payOrder/a3.png") },
        { src: require("@/assets/images/payOrder/a4.png") },
        { src: require("@/assets/images/payOrder/a5.png") },
        { src: require("@/assets/images/payOrder/a6.png") },
        { src: require("@/assets/images/payOrder/a7.png") },
        { src: require("@/assets/images/payOrder/a8.png") }
      ],

      ball: [
        {
          item: 1
        },
        {
          item: 2
        },
        {
          item: 3
        }
      ],
      selected: "long",
      config_long: "",
      config_hu: ""
    };
  },
  computed: {
    ...mapState("handlegame", ["isInit", "gameInfo", "conFigparam"]),
    ...mapState("websock", ["gameState"])
  },
  watch: {
    conFigparam(newVal) {
      const allObjects = [this.config_long, this.config_hu];
      for (const obj of allObjects) {
        if (obj.id === newVal.ruleId) {
          // 如果找到相同的 ruleId，将 credit 添加到对应规则对象的 credit 属性中
          obj.credit = (obj.credit || 0) + newVal.credit;
          break; // 如果找到了，可以提前结束循环
        }
      }
    },
    gameState(newValue, oldValue) {
      if (newValue !== oldValue) {
        if (newValue === "startBet") {
          (this.config_long.credit = 0), (this.config_hu.credit = 0);
          console.log(this.config_hu);
          console.log(this.config_long);
        }
      }
    },
    isInit: {
      handler(newVal) {
        if (newVal) {
          this.init();
          this.$store.commit("handlegame/INTE_PAGE_STATE", false);
        }
        // 执行你想要的操作
      },
      deep: true // 如果isInit是对象或数组，使用deep选项进行深度监听
    }
  },
  created() {
    var ruleData = this.gameInfo.gameRoomConfig.ruleList;
    for (var i = 0; i < ruleData.length; i++) {
      if (ruleData[i].id === "TOP1_LONG") {
        this.config_long = ruleData[i];
      }
      if (ruleData[i].id === "TOP1_HU") {
        this.config_hu = ruleData[i];
      }
    }
  },
  methods: {
    init() {
      this.selected = "";
    },
    checkSelected(value) {
      if (value === 1) {
        this.selected = "long";
      } else if (value === 2) {
        this.selected = "hu";
      }
      //龙虎样式
      this.$store.dispatch("handlegame/setLongHu", value);
    }
  }
};
</script>
<style lang="less" scoped>
.game-content {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.por-posi {
  margin-top: 20px;
}

.pro-box {
  width: 321px;
  height: 134px;
  display: flex;
  justify-content: space-between;
  .pro {
    margin-top: 12px;
    width: 149px;
    height: 134px;
    box-sizing: border-box;
    padding: 2px;
    border-radius: 12px 12px 12px 12px;

    .box {
      width: 100%;
      height: 100%;
      border-radius: 12px 12px 12px 12px;
      background-size: 100% 100%;
      padding: 15px;
      box-sizing: border-box;
      font-size: 12px;
      font-weight: 400;

      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    .img-long {
      background-image: url(@/assets/images/payOrder/long.png);
      color: #b8c8ff;
    }
    .img-hu {
      color: #ffd486;
      background-image: url(@/assets/images/payOrder/hu.png);
    }
    .content {
      font-size: 12px;
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 56px;
        height: 56px;
        background-size: 56px 56px;
        background-repeat: no-repeat;
        span:nth-child(1) {
          font-size: 18px;
          font-weight: bold;
        }
      }
      .longbgi {
        background-image: url(@/assets/images/payOrder/long-bg.png);
      }
      .hubgi {
        background-image: url(@/assets/images/payOrder/hu-bg.png);
      }
    }
  }
}
.active {
  background-image: -webkit-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: -moz-linear-gradient(
    top,
    rgba(254, 247, 179, 1) 0%,
    rgba(227, 139, 28, 1) 30%,
    rgba(253, 243, 176, 1) 60%
  );
  background-image: linear-gradient(
      top,
      rgba(254, 247, 179, 1) 0%,
      rgba(227, 139, 28, 1) 30%,
      rgba(253, 243, 176, 1) 60%
    )
    1 1;
}
.isacitve {
  padding: 1px;
  background-image: -webkit-linear-gradient(
    top,
    rgb(131, 122, 109) 0%,
    rgb(131, 122, 109) 30%,
    rgb(131, 122, 109) 60%
  );
  background-image: -moz-linear-gradient(
    top,
    rgb(131, 122, 109) 0%,
    rgb(131, 122, 109) 30%,
    rgb(131, 122, 109) 60%
  );
  background-image: linear-gradient(
      top,
      rgb(131, 122, 109) 0%,
      rgb(131, 122, 109) 30%,
      rgb(131, 122, 109) 60%
    )
    1 1;
}
.ball-select::-webkit-scrollbar {
  display: none; /* Webkit 兼容性：隐藏滚动条 */
}
.ballsize {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.ballbox {
  margin-top: 14px;
  display: flex;
}
.centerbox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .money-posi {
    margin-top: 33px;
  }
  .btn-posi {
    margin-top: 19px;
  }
}
</style>
